<template>
  <div class="content">
    <div class="tab">
      <span class="active">用户登录</span>
    </div>
    <el-form
      class="login-form"
      :rules="loginRules"
      ref="loginForm"
      :model="loginForm"
      label-width="74px"
    >
      <el-form-item prop="username" label="" class="accountname">
        <el-input
          @keyup.enter.native="handleLogin"
          v-model="loginForm.username"
          auto-complete="off"
          placeholder="请输入账号"
        >
          <!-- <i slot="prefix" class="icon-yonghu"></i> -->
        </el-input>
      </el-form-item>
      <el-form-item prop="password" label="" class="accountpwd">
        <el-input
          @keyup.enter.native="handleLogin"
          :type="passwordType"
          v-model="loginForm.password"
          auto-complete="off"
          placeholder="请输入密码"
        >
          <!-- <i
            class="el-icon-view el-input__icon"
            slot="suffix"
            @click="showPassword"
          ></i> -->
          <!-- <i slot="prefix" class="icon-mima"></i> -->
        </el-input>
      </el-form-item>
    </el-form>
    <div class="msg">{{msg}}</div>
    <el-button
      type="primary"
      @click.native.prevent="handleLogin"
      class="login-submit"
      >立即登录</el-button
    >
  </div>
</template>

<script>
import { randomLenNum } from "@/util/util";
import { mapGetters } from "vuex";

export default {
  name: "userlogin",
  data() {
    return {
      msg: '',
      loginForm: {
        username: "",
        password: "",
        redomStr: ""
      },
      checked: false,
      loginRules: {
        username: [
          { required: true, message: "请输入账号", trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 3, message: "密码长度最少为6位", trigger: "blur" }
        ],
      },
      passwordType: "password"
    };
  },
  created() {
  },
  mounted() {
  },
  computed: {
    ...mapGetters(["tagWel"])
  },
  props: [],
  methods: {
    showPassword() {
      this.passwordType == ""
        ? (this.passwordType = "password")
        : (this.passwordType = "");
    },
    handleLogin() {
      this.msg = ''
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.$store
            .dispatch("LoginByUsername", this.loginForm)
            .then((res) => {
              if(res.errno === 0){
                this.$router.push({ path: this.tagWel.value });
              } else{
                this.msg = res.errmsg
              }
              
            })
            .catch((err) => {
            });
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
  .content {
    width: 100%;
    padding: 0 36px;
    height: 100%;
    display: block;
  }
  .tab {
    color: #999999;
    font-size: 30px;
    display: flex;
    justify-content: center;
    padding: 0 40px 0 40px;
    font-family: 'MicrosoftYaHei';
    span {
      display: inline-block;
      padding: 25px 0 26px;
      cursor: pointer;
    }
    .active {
      color: #494949;
      font-weight: 500;
      letter-spacing: 5px;
      // border-bottom: 2px solid #026E9F;
    }
  }
  .login-form {
    .el-form-item {
      background-repeat: no-repeat;
      background-size: 20px 23px;
      background-position: 15px 16px;
    }
    // border-top: 2px solid #eeeeee;
    margin-top: -2px;
    .accountname {
      background-image: url('/img/account.png');
    }
    .accountpwd {
      background-image: url('/img/password.png');
    }
    .el-form-item__content {
      margin-left: 30px!important;
    }
  }
  .msg {
    font-size: 18px;
    color: red;
    text-align: center;
    height: 30px;
  }
</style>